button,
view,
text {
  transition: color 300ms, background-color 300ms;
}

/** 不使用button的after伪元素 */
button::after {
  display: none;
}

.btn-text {
  background: none;
  border: none;
  padding: initial;
  display: inline;
  font-size: 28rpx;
}

.text-primary {
  color: $primary-color;
}

/** placeholder的样式 */
.placeholder_16 {
  font-size: 32rpx;
  color: rgba(23, 26, 29, 0.24);
}

.placeholder_14 {
  font-size: 28rpx;
  color: rgba(23, 26, 29, 0.24);
}

/** 主要按钮样式 */
.btn-primary,
.btn-default {
  height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  color: #fff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background-color: $btn-primary-bg;
}

.btn-default {
  color: $primary-color;
  background-color: #fff;
  border: 2rpx solid $primary-color;
}

button[loading] {
  pointer-events: none;
}

button.btn-primary.button-hover {
  background-color: #999999 !important;
}

button.btn-default.button-hover,
.hover-default {
  background-color: #eaeaea !important;
}

.text-primary.button-hover {
  background-color: #e6a52330;
}

.btn-primary.btn-disabled,
.btn-primary[disabled] {
  pointer-events: none;
  background-color: rgba(23, 26, 29, 0.24) !important;
}

.btn-default.btn-disabled,
.btn-default[disabled] {
  pointer-events: none;
  color: $title-color-gray !important;
  background-color: rgb(255 255 255 / 13%) !important;
}

.btn-mini {
  height: 72rpx;
  line-height: 72rpx;
  font-size: 28rpx;
  padding: auto 32rpx;
  border-radius: 12rpx;
  min-width: 120rpx;
}

.btn-delete {
  color: $red-color;
}

.btn-group {
  display: flex;
  button {
    flex: 1;
  }
  button + button {
    margin-left: 30rpx;
  }
}

/** 固定到底部且距底部40rpx的按钮 */
.btn-fixed {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: safeAreaOfBottom();
}

/** 图片免失真设置 */
image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/** 自定义的单选框 ---默认状态 */
.custom-radio {
  width: 36rpx;
  height: 36rpx;
  border-radius: 100%;
  box-sizing: border-box;
  background-color: #efefef;
  border: 2rpx solid #b1b1b1;
  transition: border-color 300ms, background-color 300ms;
}

/**radio 选中状态 */
.custom-radio_checked {
  border-color: #0cb900;
  background-color: #0cb900;
}

/** 公共title,字体大小32rpx */
.title_24 {
  font-size: 32rpx;
  color: $title-color;
  font-weight: bold;
}

/** flex 横向两端对齐 */
.flex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/** 无数据 */
.no-data {
  white-space: pre;
  position: absolute;
  top: 50%;
  font-size: 32rpx;
  color: rgba(23, 26, 29, 0.24);
  left: 50%;
  transform: translate(-50%, -50%);
}

/** 遮罩层 */
.msk-bg {
  position: fixed;
  z-index: 10;
  inset: 0;
  background-color: transparent;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-grow {
  flex-grow: 1;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-evenly {
  justify-content: space-evenly;
}
